<template>

	<view class="content">
		<view class="title" style="margin-top: 200rpx;">有一个真实的头像</view>
		<view class="title">会让大家更想认识你!</view>

		<view class="avther-main" style="margin-top: 100rpx;" @click.stop="openAvatar">
			<image v-if="imageurl != ''" class="avther-image" :src="imageurl" mode=""></image>
		</view>
		<view class="des">请上传1张形象良好的正脸照片</view>
		<view class="des">保证照片像素清晰、五官可见</view>
		<view class="des">通过认证后、此照片将上传到你的相册</view>

		<view class="bottom" style="margin-top: 260rpx;">
			<view @click="back">
				<u-icon name="arrow-leftward" color="#222" size="50"></u-icon>
			</view>
			<view class="btn" @click="next()">
				<view class="bin-confirm">OK了</view>
				<u-icon name="arrow-rightward" color="#fff" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ossUpload
	} from '@/js_sdk/jason-alioss-upload/oss.js'
	export default {
		data() {
			return {
				imageurl: '',
				bucketName: '',
				objectKey: '',
				url_str: '',
				key: '',
				accessKeyId: '',
				accessKeySecret: '',
				securityToken: '',
				host: '',
				data: {
					device: '3456789089876',
					sex: '1',
					nickname: '',
					birthday: '',
					height: '',
					weight: '',
					career: '',
					income: '',
					save_city: '',
					avatar: '',
					phone: '',
					code: '',
					password: '',
				}
			};
		},
		onLoad() {
			this.data = uni.getStorageSync('registerInfo');
		},

		methods: {
			back() {
				uni.navigateBack();
			},
			openAvatar() {
				const carmeraAvatar = uni.getStorageSync('carmeraRegisterAvatar');
				if(carmeraAvatar){
					this.uploadOOS()
				}else{
					uni.showModal({
						content:'是否允许popose"拍摄照片，录制视频，存储权限"，用于上传个人头像？',
						confirmText:'允许',
						success: res=>{
							if(res.confirm){
								uni.setStorageSync('carmeraRegisterAvatar', true);
								this.uploadOOS()
							}
						}
					})
				}
			},
			uploadOOS(){
				uni.chooseImage({
					count: 1,
					success: async (file) => {
						const {success, data } = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'image/')
						if (success) {
							this.imageurl = data;
							this.requestAvatar(data);
						} else {
							uni.showToast({
								icon: 'none',
								title: data
							})
						}
					}
				})
			},
			async requestAvatar(avatar) {
				let params = {
					pic: avatar
				};
				let hearder = {
					'content-type': 'application/x-www-form-urlencoded'
				};
				let res = await this.$common.post('/app/geren/uppic', params, hearder);
				if (0 == res.code) {
					this.next();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			next() {
				uni.navigateTo({
					url: "/pages/register/register8"
				})
			}
		}
	};
</script>

<style lang="scss">
	.content {
		width: 100wh;
		height: 100vh;
		margin: 0 50rpx;

		.title {
			font-weight: bold;
			font-size: 48rpx;
			color: #222;
		}

		.bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.btn {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 150rpx;
				height: 80rpx;
				background-color: #222;
				border-radius: 10rpx;

				.bin-confirm {
					color: white;
					font-size: 24rpx;
				}
			}
		}

		.avther-main {
			width: 220rpx;
			height: 220rpx;
			border: 5rpx solid #222;
			border-radius: 50%;
			margin: 40rpx auto 40rpx;

			.avther-image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		
		.des {
			width: 702rpx;
			font-size: 28rpx;
			color: #a9a9a9;
			line-height: 64rpx;
			text-align: center;
		}

	}
</style>